import { thin } from "../thin3.mjs";
import thin_render from "./thin_render.mjs";

export default function ({
  header,
  title,
  template,
  data,
  render,
  onclose,
  width,
  height,
}) {
  let _this;
  let popcontainer;
  let popmask;

  function pop_render() {
    _this = this;

    popmask = document.createElement("popmask");
    popmask.thin_data = data;
    popmask.style.zIndex = 1000;

    if (onclose) popmask.onclose = onclose;

    let popdiaglog = document.createElement("popdialog");

    popcontainer = document.createElement("popbody"); //弹出框-内容

    if (typeof width === "number") width += "px";
    popdiaglog.style.width = width || "800px";
    if (typeof height === "number") height += "px";
    popdiaglog.style.height = height || "600px";
    //popcontainer.style.overflowY = "scroll";
    popmask.appendChild(popdiaglog);

    popdiaglog.tabIndex = -1; // 只有允许输入的元素或者tabindex=-1的元素能够捕获keydown事件。
    popdiaglog.addEventListener("keydown", (ev) => {
      // console.log({ ev, this: this });
      switch (ev.code) {
        case "Escape":
          if (window.confirm("是否关闭当前窗口？")) {
            popclose(ev.target);
          }
          // .confirmed((d) => {
          //   popclose(ev.target);
          // });

          break;
        default:
          break;
      }
    });

    let popheader = document.createElement("popheader"); //弹出框-标题

    popheader.onmousedown = function (ev) {
      var pos_offset = {
        x: popdiaglog.offsetLeft - ev.clientX,
        y: popdiaglog.offsetTop - ev.clientY,
      };
      document.addEventListener("mouseup", mouseup);
      document.addEventListener("mousemove", mousemove);

      function mousemove(ev) {
        let max = popmask.offsetHeight - 20;
        popdiaglog.style.left = pos_offset.x + ev.clientX + "px";
        let top = pos_offset.y + ev.clientY;
        popdiaglog.style.top = `${top > 0 ? (top > max ? max : top) : 0}px`;
      }

      function mouseup(ev) {
        document.removeEventListener("mousemove", mousemove);
        document.removeEventListener("mouseup", mouseup);
      }
    };

    let closeicon = document.createElement("closeicon");
    closeicon.innerText = "✕";
    closeicon.onclick = function () {
      popclose(this);
    };

    popheader.appendChild(closeicon);
    popdiaglog.appendChild(popheader);
    popdiaglog.appendChild(popcontainer);
    document.body.appendChild(popmask);

    thin_render(popheader, header || title);

    if (render !== undefined) {
      console.log("pop render");
      render({ container: popcontainer, data });
    } else {
      // console.log("pop render");
      if (template) thin(popcontainer).render(template, data);
    }
    return this;
  }
  return pop_render.call({
    render: (template, data) => {
      thin(popcontainer).render(template, data);
      return _this;
    },
    onclose: (fn) => {
      popmask.onclose = fn;
      return _this;
    },
  });
}

export function popclose(context) {
  let container = context.closest("popmask,dialog");

  if (container) {
    container?.onclose?.();
    container.parentNode.removeChild(container);
  }
}
